<template>
    <div id="id">
        <div class="id_top">标签</div>
        <ul class="id_ul" id="id_ul">

            <li v-for="(val,index) in LabelInfo" :key="index">
                <nuxt-link :to="{name:'Label-id',params:{id:val._id,type:val.type}}">
                    {{val.type}} （{{count[index]}}）
                </nuxt-link>
                <!-- @mouseenter="MouseEnter(index)" @mouseleave="MouseLeave(index)" -->
                <!-- <div></div>
                    <div></div>
                    <div></div>
                    <div></div> -->
            </li>

            <div style="clear:both"></div>
        </ul>
    </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      LabelInfo: [],
      count:[],
    };
  },
  created() {
    axios({
      url: "http://116.85.32.125:8765/api/QueryArticleType",
      method: "get"
    })
      .then(response => {
        // console.log(response);
        this.LabelInfo = response.data.data;

        for (var i = 0; i < this.LabelInfo.length; i++) {
          axios({
            url:
              "http://116.85.32.125:8765/api/QueryContent?id=" + response.data.data[i]._id,
            method: "get"
          })
            .then(response => {
              // console.log(response);
              this.tableInfo = response.data.count;
              this.count.push(response.data.result.length);
            })
            .catch(error => {
              console.log(error);
            });
        }
        console.log(this.count);
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    // MouseEnter(index) {
    //     let tag = document
    //         .getElementById("id_ul")
    //         .getElementsByTagName("li");
    //     let tagL = tag[index];
    //     tagL.childNodes[1].style.cssText = "height: 100%;transition: .1s;";
    //     setTimeout(function() {
    //         tagL.childNodes[2].style.cssText =
    //             "width: 100%;transition: .1s;";
    //     }, 100);
    //     setTimeout(function() {
    //         tagL.childNodes[3].style.cssText =
    //             "height: 100%;transition: 0.1s;";
    //     }, 200);
    //     setTimeout(function() {
    //         tagL.childNodes[4].style.cssText =
    //             "width: 100%;transition: 0.1s;";
    //     }, 300);
    // },
    // MouseLeave(index) {
    //     let tag = document
    //         .getElementById("id_ul")
    //         .getElementsByTagName("li");
    //     let tagL = tag[index];
    //     tagL.childNodes[1].style.cssText = "height: 0px;transition: .1s;";
    //     tagL.childNodes[2].style.cssText = "width: 0px;transition: .1s;";
    //     tagL.childNodes[3].style.cssText = "height: 0px;transition: 0.1s;";
    //     tagL.childNodes[4].style.cssText = "width: 0px;transition: 0.1s;";
    // }
  }
};
</script>
<style scoped lang="scss">
#id {
  margin-left: 250px;
  padding-left: 35px;
  padding-right: 85px;
  margin-top: 35px;
  .id_top {
    margin-bottom: 30px;
    font-size: 30px;
  }
  .id_ul {
    margin: 0px;
    padding: 0px;
    max-width: 1200px;

    > li {
      list-style: none;
      > a {
        text-decoration: none;
        position: relative;
        float: left;
        width: 15%;
        padding: 10px;
        text-align: center;
        margin-right: 30px;
        border: 1px dashed #ccc;
        margin-bottom: 30px;
        border-radius: 4px;
        color: black;
        &:hover {
          cursor: pointer;
          // border: 1px solid transparent;
          border: 1px solid black;
          transition: 2s;
          color: black;
          // > div:nth-child(1) {
          //     height: 100%;
          //     transition: 2s;
          // }
          // > div:nth-child(2) {
          //     width: 100%;
          //     transition: 4s;
          // }
        }
        &:active {
          color: black;
        }
      }
      // > div:nth-child(1) {
      //     position: absolute;
      //     bottom: 0px;
      //     left: 0px;
      //     width: 2px;
      //     height: 0px;
      //     background: #ccc;
      // }
      // > div:nth-child(2) {
      //     position: absolute;
      //     top: 0px;
      //     left: 0px;
      //     width: 0px;
      //     height: 2px;
      //     background: #ccc;
      // }
      // > div:nth-child(3) {
      //     position: absolute;
      //     top: 0px;
      //     right: 0px;
      //     width: 2px;
      //     height: 0px;
      //     background: #ccc;
      // }
      // > div:nth-child(4) {
      //     position: absolute;
      //     bottom: 0px;
      //     right: 0px;
      //     width: 0px;
      //     height: 2px;
      //     background: #ccc;
      // }
    }
  }
}
</style>
